<template>
  <div class="home">
<!--   header top-->
    <div class="container-fluid header">
      <div class="container">
        <div class="nav hvr-rectangle-out flex-row justify-content-between animate__animated animate__fadeInUp animate__delay-3s">
          <div class="logo hvr-back-pulse font-monospace"><i class="fa fa-wikipedia-w hvr-pulse" style="color: #f7b500"></i> <span class="hvr-shrink">JC导航</span>
          </div>
          <div class="right-nav hvr-bounce-in hidden-md-and-down">
            <span class="item">首页</span>
            <span class="item">导航</span>
            <el-button round size="small" color="#f7b500" style="color: #fff" class="hvr-wobble-to-top-right">免费领取资料</el-button>
          </div>
          <i class="fa fa-list hidden-md-and-up" style="color: #f7b500" @click="drawer = true"></i>
          <!--          <i class="fa fa-close" style="font-size:36px"></i>-->
        </div>
        <el-row>
          <el-col :span="24" :md="{span: 12}">
            <div class="header-left">
              <h3 class="animate__animated animate__backInRight">程序员的导航</h3>
              <p class="animate__animated animate__backInLeft animate__delay-1s">汇聚全球创意设计灵感、高效在线神器、<br>优质设计资源、提升技能等网站
              </p>
            </div>
          </el-col>
          <el-col class="animate__animated animate__fadeInRight" :span="24" :md="{span: 12}">
            <el-image
              class="nav-bg-right hidden-md-and-down"
              style="width: 400px; height: 400px"
              src="https://www.syospace.com/wp-content/uploads/2020/12/designer-1.png"
              fit="fit"
            ></el-image>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-drawer
      v-model="drawer"
      direction="ttb"
      size="50%"
      :before-close="() => drawer = false"
      custom-class="jc-drawer"
    >
      <div class="drawer-list">
        <span>首页</span>
        <el-divider></el-divider>
        <span>导航</span>
        <el-divider></el-divider>
        <span>免费领取资料</span>
      </div>
    </el-drawer>
<!--   header top ---end -->
<!--    center content-->
    <div class="center container-fluid" style="background: #F4F6F9">
      <div class="container">
        <div class="block" v-for="item of [1, 2, 3, 4, 5]" :key="item">
          <h3 class="title"><i class="fa fa-diamond" style="color: #F5AA41"></i> 精品推荐{{item}}</h3>
          <el-row :gutter="10">
            <el-col :span="24" :md="{span: 6}" v-for="index of [1, 2, 3, 4]" :key="index">
              <el-card shadow="never" class="hvr-wobble-bottom card" style="border-radius: 10px; cursor: pointer">
                <el-image style="width: 30px; height: 30px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
                <p class="font-monospace">Behance</p>
                <span class="font-monospace">全球设计师作品展示平台</span>
              </el-card>
            </el-col>
<!--            <el-col :span="6">2</el-col>-->
<!--            <el-col :span="6">2</el-col>-->
<!--            <el-col :span="6">2</el-col>-->
          </el-row>
          <el-row :gutter="10" style="margin-top: 20px">
            <el-col :span="24" :md="{span: 12}" v-for="item of [1, 2]" :key="item">
              <el-card shadow="never" class="hvr-float-shadow hvr-shadow card" style="border-radius: 20px; cursor: pointer">
                <el-image src="https://www.syospace.com/wp-content/uploads/2020/12/Baubauhaus.png" fit="fill"></el-image>
                <p>dec</p>
              </el-card>
            </el-col>
<!--            <el-col :span="12">3</el-col>-->
          </el-row>
        </div>
      </div>
    </div>
<!--    center content --end-->
    <div class="footer">
      <div class="container">
<!--        <el-divider></el-divider>-->
        <div style="display: flex; justify-content: space-between;align-items: center">
          <p>Copyright © 2022 JC导航</p>
          <span>author: jingo</span>
        </div>
      </div>
    </div>
    <el-backtop />
  </div>
</template>

<script lang="ts">var drawer;

import {defineComponent, reactive} from "vue";
import {successApi} from "@/api/test";

export default defineComponent({
  name: "Home",
  setup() {
    let drawer = false;
    successApi().then((res: any) => {
      console.log(res, 16);
    });
    return reactive({
      drawer,
    });
  },
});
</script>
<style lang="scss">
  .jc-drawer {
    background: #0e3c6e !important;
    color: #fff;
  }
  .header {
    background: url("https://www.syospace.com/wp-content/uploads/2020/10/online-programming-course-hero-section-bg.svg") center center no-repeat;
    height: 600px;
    color: #fff;

    .nav {
      padding: 8px 16px;
      display: flex;
      align-items: center;
      position: fixed;
      left: 0;
      width: 100vw;
      background: #0E3C6E;
      z-index: 99;

      .logo {
        font-size: 26px;
        /*font-family: 'Roboto', sans-serif;*/
        font-weight: bold;
        padding: 0 8px;
        border-radius: 5px;

        &:hover {
          cursor: pointer;
        }
      }

      .right-nav {
        .item {
          color: rgba(255, 255, 255, 0.64);
          /*margin-right: 16px;*/
          padding-right: 16px;

          &:hover {
            cursor: pointer;
            color: rgb(249 251 252);
          }
        }
      }
    }

    .nav-bg-right {
      transform: translate(80px, 160px);
    }

    .header-left {
      height: 100%;
      text-align: center;
      margin-top: 50%;
      transform: translateY(-20%);

      h3 {
        color: #FFFFFF;
        font-size: 46px;
        letter-spacing: 0px;
      }

      p {
        margin-top: 22px;
        margin-bottom: 1em;
        letter-spacing: 1px;
        color: #ccc;
      }
    }
  }

  .drawer-list {
    span {
      display: block;
    }
  }
  .center {
    .title {
      margin-bottom: 25px;
      padding-top: 50px;
      color: #54595F;
      font-size: 20px;
    }
  }
  .center {
    .card {
      margin: 8px 0;
      p {
        color: #1E2428;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 0 !important;
      }
      span {
        color: #7B8288;
        font-size: 12px;
      }
    }
  }
  .footer {
    padding: 6px 0;
    /*height: 80px;*/
    background: #030000;
    color: #F8F8F8;
    p {
      margin: 0 !important;
    }
  }
</style>
